<template>
    <el-card>
        <template #header>
            <span>合同管理</span>
        </template>
        <el-form :inline="true" class="search" ref="formIns3" :model="searchForm">
            <el-form-item prop="types" style="width:200px">
                <el-select v-model="searchForm.types" placeholder="请选择合同类型" clearable>
                    <el-option v-for="item in typesArr" :label="item.text" :value="item.n" :key="item.n" />
                </el-select>
            </el-form-item>
            <el-form-item prop="state" style="width:200px">
                <el-select v-model="searchForm.state" placeholder="请选择合约状态" clearable>
                    <el-option v-for="item in stateArr" :label="item.text" :value="item.n" :key="item.n" />
                </el-select>
            </el-form-item>
            <el-form-item prop="pay" style="width:200px">
                <el-select v-model="searchForm.pay" placeholder="请选择付款方式" clearable>
                    <el-option v-for="item in payArr" :label="item.text" :value="item.n" :key="item.n" />
                </el-select>
            </el-form-item>
            <el-form-item prop="status" style="width:200px">
                <el-select v-model="searchForm.status" placeholder="请选择合同状态" clearable>
                    <el-option v-for="item in statusArr" :label="item.text" :value="item.n" :key="item.n" />
                </el-select>
            </el-form-item>
            <el-form-item prop="time" style="width:300px">
                <el-date-picker v-model="searchForm.time" type="daterange" range-separator="至"
                    start-placeholder="合同开始时间" end-placeholder="合同到期时间" />
            </el-form-item>
            <el-form-item prop="contract" style="width:200px">
                <el-input v-model="searchForm.contract" clearable placeholder="请输入合同名称" />
            </el-form-item>
            <el-form-item prop="company" style="width:200px">
                <el-input v-model="searchForm.company" clearable placeholder="请输入服务单位名称" />
            </el-form-item>
            <el-form-item>
                <el-button :icon="Search" square type="primary" @click="getData">查询</el-button>
                <el-button :icon="Refresh" type="primary" @click="resetForm(formIns3)">重置</el-button>
                <el-button :icon="DocumentAdd" type="primary"  @click="dialogVisible = true">添加合同</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="contractData">
            <el-table-column label="序号" prop="id" align="center"></el-table-column>
            <el-table-column label="合同编号" prop="code" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="承接单位" prop="undertake" align="center">
                <template #default="{ row }">
                    {{ undertakeArr[row.undertake].text }}
                </template>
            </el-table-column>
            <el-table-column label="服务单位" prop="company" align="center"></el-table-column>
            <el-table-column label="服务领域" prop="industry" align="center">
                <template #default="{ row }">
                    {{ industryArr[row.industry + 1].text }}
                </template>
            </el-table-column>
            <el-table-column label="经手人" prop="handler" align="center"></el-table-column>
            <el-table-column label="合同类型" prop="types" align="center">
                <template #default="{ row }">
                    {{ typesArr[row.types].text }}
                </template>
            </el-table-column>
            <el-table-column label="开始时间" prop="starttime" align="center" width="110px">
            </el-table-column>
            <el-table-column label="结束时间" prop="endtime" align="center" width="110px">
            </el-table-column>
            <el-table-column label="合同状态" prop="status" align="center" width="100px">
                <template #default="{ row }">
                    <el-tag :type="type1[row.status]" effect="dark" align="center">{{ statusArr[row.status].text
                        }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="服务方式" prop="smethods" align="center">
                <template #default="{ row }">
                    {{ smethodsArr[row.smethods].text }}
                </template>
            </el-table-column>
            <el-table-column label="联系人电话" prop="phone" align="center" width="130px"></el-table-column>
            <el-table-column label="付款方式" prop="pay" align="center">
                <template #default="{ row }">
                    {{ payArr[row.pay].text }}
                </template>
            </el-table-column>
            <el-table-column label="收付款时间" prop="paytime" align="center" width="110px">
            </el-table-column>
            <el-table-column label="开票金额" prop="invoice" align="center"></el-table-column>
            <el-table-column label="是否纸质/复印件存档" prop="paperfile" align="center">
                <template #default="{ row }">
                    {{ yesnoArr[row.paperfile].text }}
                </template>
            </el-table-column>
            <el-table-column label="合同名称" prop="contract" align="center"></el-table-column>
            <el-table-column label="项目签订人" prop="sign" align="center" width="100px"></el-table-column>
            <el-table-column label="签订日期" prop="signtime" align="center" width="110px">
            </el-table-column>
            <el-table-column label="合约状态" prop="state" align="center" width="120px">
                <template #default="{ row }">
                    <el-tag :type="type2[row.state]" effect="dark" align="center">{{ stateArr[row.state].text
                        }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="服务期限（天）" prop="deadline" align="center">
                <template #default="{ row }">
                    {{ row.deadline / (1000 * 60 * 60 * 24) }}
                </template>
            </el-table-column>
            <el-table-column label="用户项目联系人" prop="con_name" align="center"></el-table-column>
            <el-table-column label="合同金额" prop="money" align="center"></el-table-column>
            <el-table-column label="已付/收款金额" prop="already" align="center"></el-table-column>
            <el-table-column label="开票情况" prop="situation" align="center"></el-table-column>
            <el-table-column label="是否存电子档" prop="digital" align="center">
                <template #default="{ row }">
                    {{ yesnoArr[row.digital].text }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" justify="middle" width="100px">
                <template #default="{ row }">
                    <el-button type="success" :icon="Edit" circle @click="handleEdit(row.id)" />
                    <el-button type="danger" :icon="Delete" circle @click="handleDelete(row.id)" />
                </template>
            </el-table-column>
        </el-table>
        <el-row justify="center">
            <el-pagination background layout="prev, pager, next" :total="total" v-model:page-size="pageSize"
                v-model:current-page="page" @current-change="getData" />
        </el-row>
        <el-dialog v-model="dialogVisible" title="新增合同" width="1200">
            <el-form :model="addForm" :rules="rules" ref="formIns" label-width="160px" :inline="true">
                <el-form-item label="合同编号" prop="code">
                    <el-input v-model="addForm.code" disabled></el-input>
                </el-form-item>
                <el-form-item label="承接单位" prop="undertake">
                    <el-select v-model="addForm.undertake" placeholder="请选择承接单位" clearable>
                        <el-option v-for="item in undertakeArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务单位名称" prop="cid">
                    <el-select v-model="cid" placeholder="请选择服务单位" clearable>
                        <el-option v-for="item in customerData" :label="item.company" :value="item.id" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="经手人" prop="handler">
                    <el-input v-model="addForm.handler"></el-input>
                </el-form-item>
                <el-form-item label="合同类型" prop="types">
                    <el-select v-model="addForm.types" placeholder="请选择合同类型" clearable>
                        <el-option v-for="item in typesArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同起止时间" prop="time" class="startend">
                    <el-date-picker v-model="time2" type="daterange" range-separator="至" start-placeholder="合同开始时间"
                        end-placeholder="合同到期时间" />
                </el-form-item>
                <el-form-item label="服务方式" prop="smethods">
                    <el-select v-model="addForm.smethods" placeholder="请选择服务方式" clearable>
                        <el-option v-for="item in smethodsArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人电话" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="付款方式" prop="pay">
                    <el-select v-model="addForm.pay" placeholder="请选择付款方式" clearable>
                        <el-option v-for="item in payArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="已付/收款时间" prop="paytime">
                    <el-date-picker v-model="time3" type="date" placeholder="请选择时间" />
                </el-form-item>
                <el-form-item label="开票金额" prop="invoice">
                    <el-input-number v-model="addForm.invoice" :min="1" :max="999999" controls-position="right"
                        placeholder="请输入开票金额" />
                </el-form-item>
                <el-form-item label="是否纸质/复印件存档" prop="paperfile">
                    <el-select v-model="addForm.paperfile" placeholder="请选择" clearable>
                        <el-option v-for="item in yesnoArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务领域" prop="industry">
                    <el-select v-model="addForm.industry" placeholder="服务领域" clearable>
                        <el-option v-for="item in industryArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同名称" prop="contract">
                    <el-input v-model="addForm.contract"></el-input>
                </el-form-item>
                <el-form-item label="项目签订人" prop="sign">
                    <el-input v-model="addForm.sign"></el-input>
                </el-form-item>
                <el-form-item label="合同签订日期" prop="signtime" style="width:450px">
                    <el-date-picker v-model="time4" type="date" placeholder="请选择时间" />
                </el-form-item>
                <el-form-item label="合约状态" prop="state">
                    <el-select v-model="addForm.state" placeholder="服务领域" clearable>
                        <el-option v-for="item in stateArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务期限" prop="deadline">
                    <el-input v-model="deadline" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户项目联系人" prop="con_name">
                    <el-input v-model="addForm.con_name"></el-input>
                </el-form-item>
                <el-form-item label="合同金额" prop="money">
                    <el-input-number v-model="addForm.money" :min="1" :max="999999" controls-position="right"
                        placeholder="请输入合同金额" />
                </el-form-item>
                <el-form-item label="已付/收款金额" prop="already">
                    <el-input-number v-model="addForm.already" :min="1" :max="999999" controls-position="right"
                        placeholder="请输入已付/收款金额" />
                </el-form-item>
                <el-form-item label="开票情况" prop="situation">
                    <el-input v-model="addForm.situation"></el-input>
                </el-form-item>
                <el-form-item label="是否电子存档" prop="digital">
                    <el-select v-model="addForm.digital" placeholder="请选择" clearable>
                        <el-option v-for="item in yesnoArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload v-model:file-list="fileList" class="upload-demo" :action="urls.UPLOAD" multiple
                        :on-remove="handleRemove" :on-success="handleSuccess">
                        <el-button type="primary" :icon="Upload">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                点击选择需要上传的附件，可多次上传
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="补充协议" prop="agreement">
                    <template #default>
                        <div style="border: 1px solid #ccc" class="addAgree">
                            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                                :defaultConfig="toolbarConfig" :mode="mode" />
                            <Editor style="height: 500px; overflow-y: hidden;" v-model="addForm.agreement"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                        </div>
                    </template>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addClose">取消</el-button>
                    <el-button type="primary" @click="handleAdd">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible2" title="更改合同" width="1200">
            <el-form :model="editForm" :rules="rules2" ref="formIns2" label-width="160px" :inline="true">
                <el-form-item label="合同编号" prop="code">
                    <el-input v-model="editForm.code" disabled></el-input>
                </el-form-item>
                <el-form-item label="承接单位" prop="undertake">
                    <el-select v-model="editForm.undertake" placeholder="请选择承接单位" clearable>
                        <el-option v-for="item in undertakeArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务单位名称" prop="cid">
                    <el-select v-model="cid2" placeholder="请选择服务单位" clearable>
                        <el-option v-for="item in customerData" :label="item.company" :value="item.id" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="经手人" prop="handler">
                    <el-input v-model="editForm.handler"></el-input>
                </el-form-item>
                <el-form-item label="合同类型" prop="types">
                    <el-select v-model="editForm.types" placeholder="请选择合同类型" clearable>
                        <el-option v-for="item in typesArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同起止时间" prop="time" class="startend">
                    <el-date-picker v-model="time5" type="daterange" range-separator="至" start-placeholder="合同开始时间"
                        end-placeholder="合同到期时间" />
                </el-form-item>

                <el-form-item label="服务方式" prop="smethods">
                    <el-select v-model="editForm.smethods" placeholder="请选择服务方式" clearable>
                        <el-option v-for="item in smethodsArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人电话" prop="phone">
                    <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="付款方式" prop="pay">
                    <el-select v-model="editForm.pay" placeholder="请选择付款方式" clearable>
                        <el-option v-for="item in payArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="已付/收款时间" prop="paytime">
                    <el-date-picker v-model="editForm.paytime" type="date" placeholder="请选择时间" />
                </el-form-item>
                <el-form-item label="开票金额" prop="invoice">
                    <el-input-number v-model="editForm.invoice" :min="1" :max="999999" controls-position="right"
                        placeholder="请输入开票金额" />
                </el-form-item>
                <el-form-item label="是否纸质/复印件存档" prop="paperfile">
                    <el-select v-model="editForm.paperfile" placeholder="请选择" clearable>
                        <el-option v-for="item in yesnoArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务领域" prop="industry">
                    <el-select v-model="editForm.industry" placeholder="服务领域" clearable>
                        <el-option v-for="item in industryArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同名称" prop="contract">
                    <el-input v-model="editForm.contract"></el-input>
                </el-form-item>
                <el-form-item label="项目签订人" prop="sign">
                    <el-input v-model="editForm.sign"></el-input>
                </el-form-item>
                <el-form-item label="合同签订日期" prop="signtime" style="width:450px">
                    <el-date-picker v-model="editForm.signtime" type="date" placeholder="请选择时间" />
                </el-form-item>
                <el-form-item label="合约状态" prop="state">
                    <el-select v-model="editForm.state" placeholder="服务领域" clearable>
                        <el-option v-for="item in stateArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务期限" prop="deadline">
                    <el-input v-model="deadline2" disabled></el-input>
                </el-form-item>
                <el-form-item label="用户项目联系人" prop="con_name">
                    <el-input v-model="editForm.con_name"></el-input>
                </el-form-item>
                <el-form-item label="合同金额" prop="money">
                    <el-input-number v-model="editForm.money" :min="1" :max="999999" controls-position="right"
                        placeholder="请输入合同金额" />
                </el-form-item>
                <el-form-item label="已付/收款金额" prop="already">
                    <el-input-number v-model="editForm.already" :min="1" :max="999999" controls-position="right"
                        placeholder="请输入已付/收款金额" />
                </el-form-item>
                <el-form-item label="开票情况" prop="situation">
                    <el-input v-model="editForm.situation"></el-input>
                </el-form-item>
                <el-form-item label="是否电子存档" prop="digital">
                    <el-select v-model="editForm.digital" placeholder="请选择" clearable>
                        <el-option v-for="item in yesnoArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同状态" prop="digital">
                    <el-select v-model="editForm.status" placeholder="请选择合同状态" clearable>
                        <el-option v-for="item in statusArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload v-model:file-list="fileList2" class="upload-demo" :action="urls.UPLOAD" multiple
                        :on-remove="handleRemove2" :on-success="handleSuccess2">
                        <el-button type="primary" :icon="Upload">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                点击选择需要上传的附件，可多次上传
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="补充协议" prop="agreement">
                    <template #default>
                        <div style="border: 1px solid #ccc">
                            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                                :defaultConfig="toolbarConfig" :mode="mode" />
                            <Editor style="height: 500px; overflow-y: hidden;" v-model="editForm.agreement"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                        </div>
                    </template>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editClose">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>
</template>
<script setup lang="ts">
import urls from "@/api/url"
import { ref, reactive, onMounted, watch, onBeforeUnmount, shallowRef } from "vue";
import { getContract, getCustomer, oneCustomer, addContract, delContract, oneContract, edtContract } from "@/api/api";
import moment from 'moment';
import { Search, Delete, Edit, Refresh, DocumentAdd, Upload } from '@element-plus/icons-vue';
import type { FormInstance, FormRules, UploadProps, UploadUserFile, UploadFile, UploadFiles } from "element-plus";
import { ElMessage, ElMessageBox } from 'element-plus';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Editor, Toolbar } from '../../node_modules/@wangeditor/editor-for-vue'
//所需数据
const industryArr = [
    { n: 1, text: "风力" },
    { n: 2, text: "电力" },
    { n: 3, text: "农业" },
    { n: 4, text: "水利" },
    { n: 5, text: "林业" },
    { n: 6, text: "应急" },
    { n: 7, text: "省市县一体化" },
    { n: 8, text: "煤矿" },
    { n: 9, text: "消防武警" },
    { n: 10, text: "企业" },
    { n: 11, text: "数据服务" },
    { n: 12, text: "政府机关" },
    { n: 13, text: "新能源" },
    { n: 14, text: "地址" },
    { n: 15, text: "内涝" },
    { n: 16, text: "保险" },
    { n: 17, text: "天然氧吧" },
    { n: 18, text: "气候可行性论证" },
    { n: 19, text: "影视及广告" },
    { n: 20, text: "直属兄弟单位" },
    { n: 21, text: "气候好产品" },
    { n: 22, text: "气象灾害风险普查" },
    { n: 23, text: "三大运营商" },
    { n: 24, text: "高速交通" }
];
const undertakeArr = [{ n: 0, text: "服务中心" }, { n: 1, text: "影视中心" }, { n: 2, text: "专服中心" }];
const typesArr = [{ n: 0, text: "收-乙方" }, { n: 1, text: "支-甲方" }];
const smethodsArr = [{ n: 0, text: "基础服务产品" }, { n: 1, text: "行业服务产品" }, { n: 2, text: "气象服务产品" }];
const payArr = [{ n: 0, text: "一次性" }, { n: 1, text: "分期" }];
const yesnoArr = [{ n: 0, text: "是" }, { n: 1, text: "否" }];
const stateArr = [{ n: 0, text: "合约中" }, { n: 1, text: "到期客户" }, { n: 2, text: "意向客户" }, { n: 3, text: "待开发客户" }];
const statusArr = [{ n: 0, text: "待审批" }, { n: 1, text: "审批通过" }, { n: 2, text: "审批驳回" }, { n: 3, text: "已作废" }];
const type1 = ["info", "success", "warning", "danger"];
const type2 = ["success", "warning", "primary", "info"];
//查询
const contractData = ref<ContractData[]>([]);
const pageSize = ref(5);
const total = ref(0);
const page = ref(1);
const getData = async () => {
    const option: ContractQuery = {
        page: page.value,
        limit: pageSize.value
    }
    if (searchForm.types !== null) {
        option.types = searchForm.types;
    }
    if (searchForm.state !== null) {
        option.state = searchForm.state;
    }
    if (searchForm.pay !== null) {
        option.pay = searchForm.pay;
    }
    if (searchForm.status !== null) {
        option.status = searchForm.status;
    }
    if (searchForm.time[0]) {
        time.value = searchForm.time;
        let a = moment(time.value[0]);
        let b = moment(time.value[1]);
        option.starttime = a.format('YYYY-MM-DD');
        option.endtime = b.format('YYYY-MM-DD');
    }
    if (searchForm.contract) {
        option.contract = searchForm.contract;
    }
    if (searchForm.company) {
        option.company = searchForm.company;
    }
    const res = await getContract(option);
    contractData.value = res.data.data;
    total.value = res.data.total;
}
const time = ref(["", ""]);
const searchForm = reactive({
    types: null,
    state: null,
    pay: null,
    status: null,
    contract: "",
    company: "",
    time: ["", ""],
})
const customerData = ref<CustomerData[]>();
onMounted(async () => {
    getData();
    const res = await getCustomer({ page: 1, limit: 20 });
    customerData.value = res.data.data;
})
const formIns3 = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
//新增
const dialogVisible = ref(false);
const addForm = reactive<Partial<ContractData>>({
    code: "",
    undertake: null,
    cid: null,
    handler: "",
    types: null,
    starttime: "",
    endtime: "",
    smethods: null,
    phone: "",
    pay: null,
    paytime: "",
    invoice: null,
    paperfile: null,
    contract: "",
    sign: "",
    signtime: "",
    state: null,
    deadline: null,
    con_name: "",
    money: null,
    already: null,
    situation: "",
    digital: null,
    agreement: "",
    status: null,
    time: null,
    industry: null,
    upload: "",
})
const time2 = ref([]);
const deadline = ref<number>();
watch(time2, () => {
    addForm.time = time2.value;
    let a = moment(time2.value[0]);
    let b = moment(time2.value[1]);
    addForm.starttime = a.format('YYYY-MM-DD');
    addForm.endtime = b.format('YYYY-MM-DD');
    addForm.code = '' + moment(addForm.starttime);
    addForm.deadline = b.diff(a);
    deadline.value = addForm.deadline / (1000 * 60 * 60 * 24);
})
const time3 = ref();
watch(time3, () => {
    let a = moment(time3.value);
    addForm.paytime = a.format('YYYY-MM-DD');
})
const cid = ref<number>();
watch(cid, async () => {
    addForm.cid = cid.value;
    const res = await oneCustomer(cid.value as number);
    addForm.industry = res.data.data.industry as number;
})
const time4 = ref();
watch(time4, () => {
    let a = moment(time4.value);
    addForm.signtime = a.format('YYYY-MM-DD');
})
const editorRef = shallowRef();
// 内容 HTML
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
const mode = "default";
//新增-上传
const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}
interface uploadRes {
    url: string;
}
const handleSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    let str = "";
    uploadFiles.forEach(v => {
        str += `${v.name}:${(v.response as uploadRes).url};`;
    })
    addForm.upload = str;
}
const addClose=()=>{
    dialogVisible.value = false;
    fileList.value=[];
}

const rules: FormRules = {
    undertake: { required: true, message: "请选择承接单位", trigger: "blur" },
    cid: { required: true, message: "请选择服务单位名称", trigger: "blur" },
    handler: { required: true, message: "请输入经手人", trigger: "blur" },
    types: { required: true, message: "请选择合同类型", trigger: "blur" },
    smethods: { required: true, message: "请选择服务方式", trigger: "blur" },
    phone: { required: true, message: "请输入联系人电话", trigger: "blur" },
    pay: { required: true, message: "请选择付款方式", trigger: "blur" },
    paytime: { required: true, message: "请选择收/付款时间", trigger: "blur" },
    invoice: { required: true, message: "请输入开票金额", trigger: "blur" },
    paperfile: { required: true, message: "请选择是否纸质/复印件存档", trigger: "blur" },
    contract: { required: true, message: "请输入合同名称", trigger: "blur" },
    sign: { required: true, message: "请输入项目签订人", trigger: "blur" },
    signtime: { required: true, message: "请选择合同签订时间", trigger: "blur" },
    state: { required: true, message: "请选择合约状态", trigger: "blur" },
    con_name: { required: true, message: "请输入用户项目联系人", trigger: "blur" },
    money: { required: true, message: "请输入合同金额", trigger: "blur" },
    already: { required: true, message: "请输入已付/收款金额", trigger: "blur" },
    situation: { required: true, message: "请输入开票情况", trigger: "blur" },
    digital: { required: true, message: "请选择是否电子存档", trigger: "blur" },
    agreement: { required: true, message: "请输入补充协议", trigger: "blur" },
    time: { required: true, message: "请选择起止时间", trigger: "blur" },
}
const formIns = ref<FormInstance>();
const handleAdd = () => {
    formIns.value?.validate(async (v) => {
        if (v) {
            const res = await addContract(addForm);
            if (res.data.code === 200) {
                ElMessage.success("新增成功");
                dialogVisible.value = false;
                formIns.value?.resetFields();
                const editor = editorRef.value;
                editor.clear();
                getData();
                fileList.value=[];
            } else {
                ElMessage.error(res.data.msg);
            }
        }
    })
}
//删除
const handleDelete = async (id: number) => {
    try {
        await ElMessageBox.confirm(
            '确认删除当前角色吗?确认继续',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        const res = await delContract(id);
        if (res.data.code === 200) {
            ElMessage.success("删除成功");
            getData();
        } else {
            ElMessage.error("删除失败");
        }
    } catch (e) {
        ElMessage.info("取消删除")
    }
}
//编辑
const dialogVisible2 = ref(false);
const editForm = ref<ContractData>({
    id: 0,
    code: "",
    undertake: null,
    cid: null,
    handler: "",
    types: null,
    starttime: "",
    endtime: "",
    smethods: null,
    phone: "",
    pay: null,
    paytime: "",
    invoice: null,
    paperfile: null,
    contract: "",
    sign: "",
    signtime: "",
    state: null,
    deadline: null,
    con_name: "",
    money: null,
    already: null,
    situation: "",
    digital: null,
    agreement: "",
    status: null,
    time: null,
    industry: null,
    upload:""
})
const rules2: FormRules = {
    undertake: { required: true, message: "请选择承接单位", trigger: "blur" },
    cid: { required: true, message: "请选择服务单位名称", trigger: "blur" },
    handler: { required: true, message: "请输入经手人", trigger: "blur" },
    types: { required: true, message: "请选择合同类型", trigger: "blur" },
    smethods: { required: true, message: "请选择服务方式", trigger: "blur" },
    phone: { required: true, message: "请输入联系人电话", trigger: "blur" },
    pay: { required: true, message: "请选择付款方式", trigger: "blur" },
    paytime: { required: true, message: "请选择收/付款时间", trigger: "blur" },
    invoice: { required: true, message: "请输入开票金额", trigger: "blur" },
    paperfile: { required: true, message: "请选择是否纸质/复印件存档", trigger: "blur" },
    contract: { required: true, message: "请输入合同名称", trigger: "blur" },
    sign: { required: true, message: "请输入项目签订人", trigger: "blur" },
    signtime: { required: true, message: "请选择合同签订时间", trigger: "blur" },
    state: { required: true, message: "请选择合约状态", trigger: "blur" },
    con_name: { required: true, message: "请输入用户项目联系人", trigger: "blur" },
    money: { required: true, message: "请输入合同金额", trigger: "blur" },
    already: { required: true, message: "请输入已付/收款金额", trigger: "blur" },
    situation: { required: true, message: "请输入开票情况", trigger: "blur" },
    digital: { required: true, message: "请选择是否电子存档", trigger: "blur" },
    agreement: { required: true, message: "请输入补充协议", trigger: "blur" },
}
const formIns2 = ref<FormInstance>();
const cid2 = ref<number>();
watch(cid2, async () => {
    editForm.value.cid = cid2.value as number;
    const res = await oneCustomer(cid2.value as number);
    editForm.value.industry = res.data.data.industry as number;
})
const time5 = ref(["", ""]);
const deadline2 = ref<number>();
time5.value[0] = editForm.value.starttime;
time5.value[1] = editForm.value.endtime;
watch(time5, () => {
    editForm.value.time = time5.value;
    let a = moment(time5.value[0]);
    let b = moment(time5.value[1]);
    editForm.value.starttime = a.format('YYYY-MM-DD');
    editForm.value.endtime = b.format('YYYY-MM-DD');
    editForm.value.code = '' + moment(editForm.value.starttime);
    editForm.value.deadline = b.diff(a);
    deadline2.value = editForm.value.deadline / (1000 * 60 * 60 * 24);
})
const handleEdit = async (id: number) => {
    dialogVisible2.value = true;
    const res = await oneContract(id);
    editForm.value = res.data.data;
    cid2.value = editForm.value.cid as number;
    time5.value[0] = editForm.value.starttime;
    time5.value[1] = editForm.value.endtime;
    deadline2.value = (editForm.value.deadline as number) / (1000 * 60 * 60 * 24);
    fileList2.value=[];
    let files=editForm.value.upload?.split(";")
    files?.forEach(v=>{
        let file=v.split(":");
        fileList2.value.push({name:file[0],url:file[1]})
    })
    fileList2.value.pop();
}
const handleSubmit = async () => {
    try {
        await formIns2.value?.validate();
        let a = moment(editForm.value.signtime);
        editForm.value.signtime = a.format('YYYY-MM-DD');
        const res = await edtContract(editForm.value.id, editForm.value);
        if (res.data.code === 200) {
            ElMessage.success("更新成功");
            dialogVisible2.value = false;
            getData();
            fileList2.value=[];
        } else {
            ElMessage.error(res.data.msg);
        }
    } catch (error) {
        throw error;
    }
}
//编辑-上传
const fileList2 = ref<UploadUserFile[]>([]);
const handleRemove2: UploadProps['onRemove'] = (file, uploadFiles) => {
    // console.log(file, uploadFiles)
}
const handleSuccess2 = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    let str = "";
    uploadFiles.forEach(v => {
        str += `${v.name}:${(v.response as uploadRes).url};`;
    })
    editForm.value.upload = str;
}
const editClose=()=>{
    dialogVisible2.value = false;
    fileList2.value=[];
}
</script>
<style scoped>
.el-row {
    height: 60px;
}

.el-input,
.el-select,
.el-input-number {
    width: 300px;
    height: 30px;
}

.startend,
.el-date-picker {
    width: 460px;
    height: 30px;
}

.search {
    flex-wrap: wrap;
}

.el-form-item {
    flex-wrap: wrap;
}
.addAgree{
    width:900px;
}
</style>